<template>
  <div class="root">
    <acme-app-bar title="Search"></acme-app-bar>
    
    <div class="ui-title">基础用法</div>
    <acme-search-bar v-model="value1" />

    <div class="ui-title">自定义右侧按钮</div>
    <acme-search-bar v-model="value2" rightText="取消" @rightClick="rightClick" />

    <div class="ui-title">自定义高度</div>
    <acme-search-bar v-model="value3" :height="90" :inputHeight="64" />

    <div class="ui-title">显示返回按钮</div>
    <acme-search-bar v-model="value4" goBack />

    <div class="ui-title">自定义背景色</div>
    <acme-search-bar v-model="value5" background="#F82B26" />
  </div>
</template>

<script>
  import AcmeSearchBar from "@/components/acme-design/search-bar/index.vue"
  export default {
    components: {
      AcmeSearchBar,
    },
    data() {
      return {
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        value5: '',
      };
    },
    methods: {
      rightClick() {
        
      }
    },
  };
</script>


<style lang="scss" scoped>
  .root {
    min-height: 100vh;
    overflow: hidden;
  }
</style>